<template>
  <div class="home-banner">
    <el-carousel height="600px" :interval="5000" arrow="hover" :autoplay="true">
      <el-carousel-item v-for="(item, index) in bannerList" :key="index">
        <div class="banner-content" :style="{ backgroundImage: `url(${getImageUrl(item.image)})` }">
          <div class="banner-overlay"></div>
          <div class="banner-text animate__animated animate__fadeInUp">
            <div class="text-container">
              <h2 class="title">{{ item.title }}</h2>
              <p class="description">{{ item.description }}</p>
              <router-link 
                :to="'/solutions'" 
                class="learn-more-btn animate__animated animate__fadeInUp"
              >
                了解更多
              </router-link>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getBannerList } from '@/api/home'
import 'animate.css/animate.min.css'

const bannerList = ref([])

// 处理图片URL
const getImageUrl = (image) => {
  if (!image) return ''
  if (image.startsWith('http')) return image
  // 检查是否已经包含 /uploads/
  if (image.startsWith('/uploads/')) {
    return `/api${image}`
  }
  return `/api/uploads/${image}`
}

const fetchBannerData = async () => {
  try {
    const res = await getBannerList()
    console.log('轮播图数据:', res.data) // 调试日志
    if (res.data && res.data.length > 0) {
      bannerList.value = res.data
    } else {
      // 添加默认数据
      bannerList.value = [
        {
          title: '计算机视觉解决方案',
          description: '智能视觉识别，赋能工业升级',
          image: '/uploads/carousel/banner1.jpg'
        },
        {
          title: 'AI解决方案',
          description: '智能化业务流程，提升企业运营效率',
          image: '/uploads/carousel/banner2.jpg'
        },
        {
          title: 'LLM解决方案',
          description: '大语言模型应用，助力企业智能升级',
          image: '/uploads/carousel/banner3.jpg'
        }
      ]
    }
  } catch (error) {
    console.error('获取轮播图数据失败:', error)
    bannerList.value = [
      {
        title: '计算机视觉解决方案',
        description: '智能视觉识别，赋能工业升级',
        image: '/uploads/carousel/banner1.jpg'
      },
      {
        title: 'AI解决方案',
        description: '智能化业务流程，提升企业运营效率',
        image: '/uploads/carousel/banner2.jpg'
      },
      {
        title: 'LLM解决方案',
        description: '大语言模型应用，助力企业智能升级',
        image: '/uploads/carousel/banner3.jpg'
      }
    ]
  }
}

onMounted(() => {
  fetchBannerData()
})
</script>

<style lang="scss" scoped>
.home-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  
  :deep(.el-carousel__container) {
    .el-carousel__arrow {
      background-color: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.6);
      font-size: 20px;
      width: 50px;
      height: 50px;
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.4);
      }
    }
    
    .el-carousel__indicators {
      bottom: 30px;
      
      .el-carousel__button {
        width: 30px;
        height: 4px;
        border-radius: 2px;
        background-color: rgba(255, 255, 255, 0.6);
        transition: all 0.3s ease;
        
        &:hover {
          background-color: #fff;
        }
      }
    }
  }
  
  .banner-content {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: transform 0.6s ease;
    
    &:hover {
      transform: scale(1.05);
    }
  }
  
  .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.5)
    );
    z-index: 1;
  }
  
  .banner-text {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    
    .text-container {
      text-align: center;
      max-width: 1000px;
      padding: 40px;
      border-radius: 20px;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      
      h2 {
        font-size: 56px;
        font-weight: 800;
        margin-bottom: 30px;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        letter-spacing: 2px;
      }
      
      p {
        font-size: 28px;
        color: rgba(255, 255, 255, 0.9);
        max-width: 800px;
        margin: 0 auto 40px;
        line-height: 1.6;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      }
      
      .learn-more-btn {
        display: inline-block;
        padding: 15px 40px;
        background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
        color: #fff;
        text-decoration: none;
        border-radius: 30px;
        font-size: 20px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
          background: linear-gradient(45deg, #ff8e8e, #ff6b6b);
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .banner-text {
      .text-container {
        padding: 20px;
        
        h2 {
          font-size: 36px;
          margin-bottom: 20px;
        }
        
        p {
          font-size: 18px;
          margin-bottom: 30px;
        }
        
        .learn-more-btn {
          padding: 12px 30px;
          font-size: 16px;
        }
      }
    }
  }
}
</style> 